<template>
    <transition>
        <div class="dragIcon twinkle" :style="{left:left+'px',top:top+'px'}">
            <i class="el-icon-headset"></i>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "OnlineService",
        data() {
            return {
                left: 0,
                top: 0,
                clientW: document.documentElement.clientWidth,
                clientH: document.documentElement.clientHeight
            }
        },
        created() {
            this.left = (this.clientW - 50);
            this.top = (this.clientH - 80)
        }
    }
</script>

<style scoped>
    .dragIcon {
        position: fixed;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ee171c;
        line-height: 40px;
        text-align: center;
        color: #fff;
        float: right;
        z-index: 99999;
    }

    .twinkle {
        -webkit-animation: zoom 3s infinite ease-in-out; /* Safari 和 Chrome */
        animation: zoom 3s infinite ease-in-out;
    }

    /*@keyframes：以百分比来规定改变发生的时间
    *-webkit-、-moz- 或 -o- 不同浏览器支持
    */
    @keyframes zoom {
        0% {
            transform: scale(1.0);
            -ms-transform: scale(1.0); /* IE 9 */
            -moz-transform: scale(1.0); /* Firefox */
            -webkit-transform: scale(1.0); /* Safari 和 Chrome */
            -o-transform: scale(1.0); /* Opera */
        }
        50% {
            transform: scale(1.3);
            -webkit-transform: scale(1.3)
        }
        100% {
            transform: scale(1.6);
            -webkit-transform: scale(1.6);
            opacity: 0.1;
        }
    }
</style>